import React, { useState } from 'react';
import { View, Camera, Image } from '@tarojs/components';
import './index.less';
import TitleBar from '@/src/components/titleBar';
import store from '@/src/store';
import { observer } from 'mobx-react-lite';
import Taro, { useDidShow } from '@tarojs/taro';

export interface PhotoRecognitionProps {
  //是否显示识别记录
  showRecord?: boolean;
  //点击确定回调事件
  okClickFun: () => void;
  //点击左上角返回按钮触发的事件
  onBackClickFun?: () => void;
}

const PhotoRecognition: React.FC<PhotoRecognitionProps> = ({
  okClickFun,
  onBackClickFun,
  showRecord = true,
}) => {
  const [photo, setPhoto] = useState<string>('');

  const takePhoto = async () => {
    const ctx = Taro.createCameraContext();
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        setPhoto(res.tempImagePath);
      },
      fail: (err) => {
        console.error('拍照失败', err);
      },
    });
  };

  // 上传照片
  const uploadPhoto = () => {
    Taro.navigateTo({
      url: '/subPagesScan/identifyResult/index',
    });
    okClickFun();
  };

  // 页面显示时隐藏底部栏
  useDidShow(() => {
    store.commonStore.setShowTabBar(false);
  });

  // 点击标题栏返回事件
  const onBackClick = () => {
    if (onBackClickFun) {
      onBackClickFun();
    } else {
      Taro.switchTab({ url: '/pages/home/index' });
      // 离开扫描页时显示底栏，并重置 activeTab
      store.commonStore.setShowTabBar(true);
      store.commonStore.setActiveTab(0);
    }
  };

  // 识别记录页面
  const gotoRecord = () => {
    Taro.navigateTo({ url: '/subPagesScan/identifyRecords/index' });
  };

  return (
    <View className="photoRecognition-page">
      <TitleBar
        showLeftBack={true}
        title="拍照识别"
        theme={photo ? 'light' : 'dark'}
        onBack={onBackClick}
      ></TitleBar>
      {/* 摄像头预览区 */}
      {!photo && (
        <View className="camera-wrapper">
          <Camera devicePosition="back" flash="off" className="camera" />
          {/* —— 白色引导框 —— */}
          <Image
            src="https://file.linkcook.cn/image/wineMiniProgram/imgs/scan/ciga.png"
            className="guide-box"
          />
          <View className="takePh-desc">请将雪茄标置于虚线框内拍照</View>
          {/* —— 底部快门按钮 —— */}
          <View className="shutter-bar">
            {showRecord && (
              <Image
                src="https://file.linkcook.cn/image/wineMiniProgram/imgs/scan/record.png"
                className="record"
                onClick={gotoRecord}
              ></Image>
            )}
            <Image
              src="https://file.linkcook.cn/image/wineMiniProgram/imgs/scan/takePh.png"
              className="shutter-btn"
              onClick={takePhoto}
            />
            <Image
              src="https://file.linkcook.cn/image/wineMiniProgram/imgs/scan/photo.png"
              className="selectPh"
            ></Image>
          </View>
        </View>
      )}

      {/* 拍完后显示结果 */}
      {photo && (
        <View className="result">
          <Image src={photo} mode="widthFix" className="result-img" />
          <View className="tips">确定上传该雪茄正标图吗？</View>
          <View
            className="btn-container"
            style={{ bottom: `${store.commonStore.safeAreaBottom}rpx` }}
          >
            <View className="botton grey" onClick={() => setPhoto('')}>
              重拍
            </View>
            <View className="botton sure" onClick={uploadPhoto}>
              确定
            </View>
          </View>
        </View>
      )}
    </View>
  );
};

export default observer(PhotoRecognition);
